<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>店铺信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <%--  搜索框--%>
    <el-form :inline="true" :model="branchForm" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="branchForm.branchname" placeholder="请输入店铺名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="query(1)">查询</el-button>
            <el-button type="primary" @click="insertVisible=true">新增</el-button>
        </el-form-item>
    </el-form>

    <%--  新增部门信息框--%>
    <el-dialog
            title="新增门店信息"
            :visible.sync="insertVisible"
            width="40%">
        <el-form ref="insertForm" :model="insertForm" label-width="80px">
            <el-form-item label="门店编号"
                          prop="branchid"
                          :rules="{required: true, message: '门店编号不能为空', trigger: 'blur'}">
                <el-input v-model="insertForm.branchid" placeholder="请输入门店编号"></el-input>
            </el-form-item>
            <el-form-item label="门店名"
                          prop="branchname"
                          :rules="{required: true, message: '门店名不能为空', trigger: 'blur'}">
                <el-input v-model="insertForm.branchname" placeholder="门店名"></el-input>
            </el-form-item>
            <el-form-item label="开店日期"
                          prop="starttime"
                          :rules="{required: true, message: '日期不能为空', trigger: 'blur'}">
                <el-date-picker type="date"
                                placeholder="选择日期" v-model="insertForm.starttime"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="门店地址"
                          prop="address"
                          :rules="{required: true, message: '门店地址不能为空', trigger: 'blur'}">
                <el-input v-model="insertForm.address" placeholder="请输入门店地址"></el-input>
            </el-form-item>
            <el-form-item label="分配店长"
                          prop="staffid"
                          :rules="{required: true, message: '店长不能为空', trigger: 'blur'}"
            >
                <el-select v-model="insertForm.staffid" placeholder="--请选择--">
                    <el-option v-for="(items,index) in staffs " :key="items.id" :label="items.staffname"
                               :value="items.staffid"></el-option>

                </el-select>
            </el-form-item>
            <el-form-item label="状态选择"
                          prop="state"
                          :rules="{required: true, message: '状态不能为空', trigger: 'blur'}">
                <el-select v-model="insertForm.state" placeholder="--请选择--">
                    <el-option label="营业" value="1"></el-option>
                    <el-option label="整顿" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="insertConfirm('insertForm')">确 定</el-button>
    <el-button @click="insertForm={}">重 置</el-button>

  </span>
    </el-dialog>
    <div v-if="tableData.length>0">
        <%--  表格内容--%>
        <el-table
                :data="tableData"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :border="true"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="branchid"
                    label="门店编号"
                    show-overflow-tooltip
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="门店名"
                    show-overflow-tooltip
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="starttime"
                    label="开店时间"
                    show-overflow-tooltip
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    show-overflow-tooltip
                    label="店长">
            </el-table-column>
            <el-table-column
                    prop="staffNum"
                    label="本店人数"
                    show-overflow-tooltip
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state === '整顿'"
                            type="info"
                            disable-transitions>整顿
                    </el-tag>
                    <el-tag
                            v-else="scope.row.state === '营业'"
                            type="success"
                            disable-transitions>营业
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="400">
                <template slot-scope="scope">
                    <div v-if="scope.row.branchid==12138"
                         style="text-align: center;margin:5px;color:darkred;font-size:30px;font-weight:600;">
                        总&nbsp;&nbsp;&nbsp;&nbsp;店
                    </div>
                    <el-row v-else>
                        <el-button type="warning" @click="editPermission(scope.row)" round size="small">编辑
                        </el-button>
                        <el-button v-if="staffInfo.staffid === 111" @click="changeShopManager(scope.row)" type="success"
                                   size="small">更换店长
                        </el-button>
                        <el-button v-if="staffInfo.staffid === 111" @click="ShopManagerTransfer(scope.row)"
                                   type="success"
                                   size="small">店长调离
                        </el-button>
                        <el-button @click="roleDel(scope.row)" type="danger" icon="el-icon-delete" circle
                                   size="small"></el-button>
                        <el-button @click="roleEditor(scope.row)" type="primary"
                                   size="small">整顿
                        </el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <%--分页组件--%>
        <el-pagination
        <%-- 改变每页显示的记录条数的函数 --%>
                @size-change="handleSizeChange"
        <%--改变页码触发的函数--%>
                @current-change="handleCurrentChange"
        <%--当前页数--%>
                :current-page="currentPage"
        <%--页面大小的下拉框--%>
                :page-sizes="[5,10,15,20]"
        <%--默认每页显示的条数--%>
                :page-size="pageSize"
        <%--组件布局--%>
                layout="total, sizes, prev, pager, next, jumper"
        <%--总条数--%>
                :total="total">
        </el-pagination>
    </div>
    <div v-else>
        <el-empty description="该搜索暂无数据">
            <el-button type="primary" @click="inittable">显示初始数据</el-button>
        </el-empty>
    </div>


    <%--  编辑按钮弹出框--%>
    <el-dialog
            title="新增门店信息"
            :visible.sync="editVisible"
            width="40%">
        <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="门店编号">
                <el-input v-model="editForm.branchid"
                          :disabled="isInput"></el-input>
            </el-form-item>
            <el-form-item label="门店名">
                <el-input v-model="editForm.branchname"></el-input>
            </el-form-item>
            <el-form-item label="开店日期">
                <el-date-picker type="date"
                                :disabled="isInput"
                                v-model="editForm.starttime"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="门店地址">
                <el-input v-model="editForm.address"></el-input>
            </el-form-item>
            <el-form-item label="原店长id">
                <el-input v-model="editForm.staffid"
                          :disabled="isInput"></el-input>
            </el-form-item>
            <el-form-item label="原店长">
                <el-input v-model="editForm.staffname"
                          :disabled="isInput"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editConfirm">确 定</el-button>
    <el-button @click="editForm={}">重 置</el-button>


  </span>
    </el-dialog>

    <%--  更换店长弹出框--%>
    <el-dialog
            title="修改门店店长"
            :visible.sync="editBranchVisible"
            width="40%">
        <el-form ref="form" :model="editBranchForm" label-width="80px">
            <el-form-item label="门店名">
                <el-input v-model="editBranchForm.branchname"
                          :disabled="isInput"></el-input>
            </el-form-item>
            <el-form-item label="分配店长"
                          prop="staffid">
                <el-select v-model="editBranchForm.staffid" placeholder="--请选择--">
                    <el-option v-for="(items,index) in staffs " :key="items.id" :label="items.staffname"
                               :value="items.staffid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editBranchConfirm">确 定</el-button>
    <el-button @click="editBranchForm={}">重 置</el-button>


  </span>
    </el-dialog>

    <%--  店长调离弹出框--%>
    <el-dialog
            :before-close="handleClose"
            title="调离门店店长"
            :visible.sync="transferVisible"
            width="80%">
        <el-form ref="transferForm" :model="transferForm" label-width="80px">
            <el-form-item label="工号">
                <el-input v-model="transferForm.staffid"
                          :disabled="isInput"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="transferForm.staffname"
                          :disabled="isInput"></el-input>
            </el-form-item>
            <el-form-item label="门店名称">
                <el-input v-model="transferForm.branchname"
                          :disabled="isInput"></el-input>
            </el-form-item>

            <el-form-item label="所在职位" prop="rolenames">
                <el-input v-model="rolenames"
                          disabled></el-input>
            </el-form-item>

            <el-form-item label="新店店名"
                          prop="branchid">
                <el-select v-model="transferForm.branchid" placeholder="--请选择--">
                    <el-option v-for="(items,index) in branches " :key="items.id" :label="items.branchname"
                               :value="items.branchid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="新职位"
                          prop="roleid">
                <el-select v-model="transferForm.roleid" placeholder="--请选择--">
                    <el-option v-for="(items,index) in roles " :key="items.id" :label="items.rolename"
                               :value="items.roleid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="transferConfirm">确 定</el-button>
    <el-button @click="transferForm={}">重 置</el-button>


  </span>
    </el-dialog>

</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //表格内容
            tableData: [],
            //当前页面
            currentPage: 1,
            //每条默认条数
            pageSize: 5,
            //总条数
            total: 0,
            //搜索的店铺对象
            branchForm: {
                branchname: ''
            },
            //控制添加对话框的显示与隐藏
            insertVisible: false,
            //添加表单对象
            insertForm: {},
            //修改表单对象
            editForm: {},
            //控制修改对话框的显示与隐藏
            editVisible: false,
            //修改对话框中设置input中的内容部门修改
            isInput: true,
            //可以当选店长的员工
            staffs: [],
            //控制修改门店店长对话框的显示与隐藏
            editBranchVisible: false,
            //修改门店店长表单对象
            editBranchForm: {},
            //控制调离门店店长表单对话框的显示与隐藏
            transferVisible: false,
            //调离门店店长表单对象
            transferForm: {},
            //可以调离的新店铺名称
            branches: [],
            //可以调离的新职位
            roles: [],
            //调离前员工职务（店长）
            rolenames: '',
            //用户信息
            staffInfo: {},

        },
        created() {
            this.inittable();
            this.initNewBranch();
            this.initStaffInfo();
        },
        methods: {
            /*获取登录信息*/
            initStaffInfo() {
                axios.get('/staff/info1').then(res => {
                    this.staffInfo = res.data.data;
                })
            },
            /* 表格格式化 */
            inittable() {
                let self = this;
                axios.post("/branch/store?currentPage=" + this.currentPage +
                    '&pageSize=' + this.pageSize +
                    '&branchname=' + this.branchForm.branchname).then(function (resp) {
                    self.tableData = resp.data.rows
                    self.total = resp.data.total
                })
            },
            /* 改变也页面大小*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            /* 改变显示页码 */
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            /* 点击查询按钮方法 */
            query(val) {
                if (val === 1) {
                    this.currentPage = 1;
                }
                let self = this
                axios.post("/branch/store?currentPage=" + this.currentPage +
                    '&pageSize=' + this.pageSize +
                    '&branchname=' + this.branchForm.branchname).then(function (resp) {
                    self.tableData = resp.data.rows
                    self.total = resp.data.total
                })
            },
            /* 加载可以当选店长的员工姓名*/
            initNewBranch() {
                let self = this;
                axios.post("/branch/noArrangementBranch").then(function (resp) {
                    self.staffs = resp.data.data
                })
            },
            /* 将添加框中当选为店长的员工的branchid 进行修改*/
            changBranchid() {
                axios.post("/branch/changBranch", this.insertForm).then(function (resp) {
                })
            },
            /* 根据添加框选出的店长的staffid 进行将自身的roleid改为店长roleid (1)*/
            changeRoleid() {
                axios.post("/branch/changeRoleid", this.insertForm).then(function (resp) {
                })
            },
            /* 点击新增确认按钮方法*/
            insertConfirm(insertForm) {
                //通过validate 判断所填内容是否为空
                this.$refs[insertForm].validate((valid) => {
                    if (valid) {
                        let self = this;
                        self.changBranchid();
                        self.changeRoleid();
                        axios.post("/branch/insert", this.insertForm).then(function (resp) {
                            if (resp.data === 1) {
                                //提示信息
                                self.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                //重新刷新页面
                                self.inittable();
                                self.initNewBranch();
                            }
                            //关闭修改对话框
                            self.insertVisible = false;
                            self.insertForm = {}
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            /* 点击修改按钮方法*/
            editPermission(row) {
                this.editVisible = true;
                this.editForm = row;
            },
            /* 点击修改确认方法*/
            editConfirm() {
                let self = this;
                axios.post("/branch/update", this.editForm).then(function (resp) {
                    //提示信息
                    if (resp.data === 1) {
                        self.$message({
                            show: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        //关闭修改对话框
                        self.editVisible = false;
                        //刷新表格
                        self.inittable();
                    }
                })
            },
            /*点击整顿方法*/
            roleEditor(row) {
                let self = this;
                //点击整顿
                self.$confirm('确定营业/整顿吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    //判断 是整顿还是营业
                    if (row.state === "整顿") {
                        row.state = 1
                    } else {
                        row.state = 0
                    }
                    axios.post("/branch/adjust", row).then(function (resp) {
                        if (resp.data === 1) {
                            self.inittable();
                            self.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    })
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
            /* 点击删除方法*/
            roleDel(row) {
                let self = this;
                //点击删除
                self.$confirm('真的删除店铺吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    if (row.staffNum > 0) {
                        //判断该店是否存在员工
                        self.$message({
                            type: 'warning',
                            message: '该店还存在员工，无法删除！'
                        });
                        //查询该店是否还存在商品（如果有就无法删除）


                    } else {
                        axios.post("/branch/queryProduct", row).then(function (resp) {
                            console.log(resp.data.data.length)
                            if (resp.data.data.length > 0) {
                                self.inittable();
                                self.$message({
                                    type: 'warning',
                                    message: '该店还存在商品，请将所有商品调离后删除！'
                                });

                            } else {
                                axios.post("/branch/delete", row).then(function (resp) {
                                    if (resp.data === 1) {
                                        self.inittable();
                                        self.$message({
                                            type: 'success',
                                            message: '删除成功!'
                                        });
                                    }
                                })
                            }
                        })

                    }

                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            /* 点击更换店长按钮方法*/
            changeShopManager(row) {
                this.editBranchForm = row;
                let self = this;
                if (row.staffid == null) {
                    self.editBranchVisible = true;
                } else {
                    self.$message({
                        showClose: true,
                        message: '该店铺有店长，请先调离！',
                        type: 'info'
                    });
                }
            },
            /* 将修改门店店长框中当选为店长的员工的branchid 进行修改*/
            changeManagerBranchid() {
                axios.post("/branch/changBranch", this.editBranchForm).then(function (resp) {
                })
            },
            /* 将修改门店店长框中当选为店长的员工的roleid 进行修改*/
            changeManagerRoleid() {
                axios.post("/branch/changeRoleid", this.editBranchForm).then(function (resp) {
                })
            },
            /* 点击更换店长确认方法*/
            editBranchConfirm() {
                let self = this;
                self.changeManagerBranchid();
                self.changeManagerRoleid();
                axios.post("/branch/updateManager", this.editBranchForm).then(function (resp) {
                    //提示信息
                    if (resp.data === 1) {
                        self.$message({
                            show: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        //关闭修改对话框
                        self.editBranchVisible = false;
                        //刷新表格
                        self.inittable();
                        //当选店长的员工姓名
                        self.initNewBranch();
                    }
                })
            },
            /* 点击店长调离按钮方法*/
            ShopManagerTransfer(row) {
                this.transferForm = row;
                let self = this;
                if (row.staffid != null) {
                    self.transferVisible = true;
                    //加载所有职位
                    self.initAllRoleName();
                    //加载所有店名
                    self.initAllBranchName();
                    //加载当前职位（店长）
                    self.initManagerRoleName();

                } else {
                    self.$message({
                        showClose: true,
                        message: '该分店无店长，无需调离！',
                        type: 'info'
                    });
                }

            },
            /* 加载店长调离框中所在职位信息*/
            initManagerRoleName() {
                let self = this;
                axios.post("/branch/RoleNameByStaffid", this.transferForm).then(function (resp) {
                    self.rolenames = resp.data.data[0].rolename
                })
            },
            /* 加载店长调离框中所有职位信息*/
            initAllRoleName() {
                let self = this;
                axios.post("/branch/selectAllRoleName").then(function (resp) {
                    self.roles = resp.data.data
                })
            },
            /* 加载店长调离框中所有店名*/
            initAllBranchName() {
                let self = this;
                axios.post("/branch/selectAllBranchName").then(function (resp) {

                    self.branches = resp.data.data
                })
            },
            /* 点击店长调离确认方法*/
            transferConfirm() {
                let self = this;
                //将原店长的staffid改为null
                self.changeManagerStaffid();
                // 修该调离后所在店铺
                self.changeManagerBranchids();
                // 修改调离后的职务
                self.changeManagerRoleids();
                //关闭调离对话框
                self.transferVisible = false;
                //刷新表格
                setTimeout(() => {
                    self.$message({
                        show: true,
                        message: '调离成功',
                        type: 'success'
                    });
                    self.inittable();
                }, 800)
                // self.initNewBranch();

            },
            /* 点击调离确定 将原店铺的店长的staffid 改为null*/
            changeManagerStaffid() {
                axios.post("/branch/changeManagerStaffid", this.transferForm).then(function (resp) {
                })
            },
            /* 点击调离确定 将原店铺的店长的branchid 改为新店的branchid*/
            changeManagerBranchids() {
                axios.post("/branch/changeManagerBranchid", this.transferForm, this.transferForm.branchid).then(function (resp) {
                })
            },
            /* 点击调离确定 将原店铺的店长的roleid 该为新职务的roleid*/
            changeManagerRoleids() {
                axios.post("/branch/changeManagerRoleid", this.transferForm, this.transferForm.roleid).then(function (resp) {
                })
            },
            handleClose(done) {
                this.transferForm = {}
                this.transferVisible = false;
            }
        }
    })
</script>
</body>
</html>
